<template>
    <div class="main">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-card v-for="item in film_list" :key="item.filmId" @click="show_detail(item.filmId)">
                <template #thumb>
                    <!-- 电影缩略图 -->
                    <img :src="item.poster" width="66" alt="" />
                </template>
                <template #title>
                    <!-- 电影标题 -->
                    <div class="title">{{ item.name }}</div>
                </template>
                <template #desc>
                    <!-- 电影描述 -->
                    <div class="desc">
                        <div>
                            观众评分：<span class="grade">{{ item.grade }}</span>
                        </div>
                        <div>
                            <!-- 主演的显示涉及到数据的处理，需要使用过滤器 -->
                            主演：{{ item.actors | parseActors }}
                        </div>
                        <div>{{ item.nation }} | {{ item.runtime }}分</div>
                    </div>
                </template>
                <template #tags>
                    <!-- 购票按钮 -->
                    <van-tag plain class="buyTicket" size="large" color="#ff5f16" type="danger">购票</van-tag>
                </template>
            </van-card>
        </van-list>
    </div>
</template>

<script>
// 导入uri
import uri from "@/config/uri";
// 导入vant相关组件并注册（Toast不是组件，是方法）
import Vue from "vue";
import { Card, Toast, Tag, List } from "vant";
Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
export default {
    data() {
        return {
            // 该组件电影列表的数据
            film_list: [],
            // 页码
            pageNum: 1,
            // 表示当前是否处于数据加载的时候
            loading: false,
            // 表示所有的数据是否全部加载完毕（如果其为true则即便滑动到底部也不会再触发异步请求）
            finished: false,
        };
    },
    // 获取数据（进来）【没有使用价值了】
    // created() {
    //     this.$http.get(uri.getNowList).then((res) => {
    //         if (res.status === 0) {
    //             // 保存接口获取到的电影数据
    //             this.film_list = res.data.films;
    //         } else {
    //             // 接口调用问题的提示
    //             Toast("获取列表数据失败！");
    //         }
    //     });
    // },
    filters: {
        // 处理演职人员信息
        parseActors(actors) {
            let str = "";
            if (actors) {
                actors.forEach((el) => {
                    str += el.name + " ";
                });
            } else {
                str = "暂无主演";
            }
            return str.length > 17 ? str.substr(0, 17) + "..." : str;
        },
    },
    methods: {
        // 页面进来的时候和加载更多的时候都会触发
        onLoad() {
            // 请求数据
            this.$http.get(uri.getNowList + "?pageNum=" + this.pageNum).then((res) => {
                if (res.status === 0) {
                    // 最大的页码数
                    let maxPage = Math.ceil(res.data.total / 10);

                    // 保存接口获取到的电影数据(不能覆盖)
                    // this.film_list = res.data.films;
                    // this.film_list.push(...res.data.films)
                    this.film_list = [...this.film_list, ...res.data.films];

                    // 给页码加加
                    if (this.pageNum < maxPage) {
                        this.pageNum++;
                    } else {
                        // 没有数据了
                        // 若数据已全部加载完毕，则直接将 `finished` 设置成 `true` 即可
                        // 告诉list组件，后续再无数据，即便滚动条到达底部也不要再触发onload事件了
                        this.finished = true;
                    }

                    // 本次请求结束
                    // 数据更新完毕后，将 `loading` 设置成 `false`
                    // 本次请求结束如果不将其设置成false则无法进行下一次请求
                    this.loading = false;
                } else {
                    // 接口调用问题的提示
                    Toast("获取列表数据失败！");
                }
            });
        },
        // 去详情
        show_detail(filmID) {
            this.$router.push("/film/" + filmID);
        },
    },
};
</script>

<style scoped>
/* 电影标题样式 */
.title {
    color: #191a1b;
    font-size: 16px;
    line-height: 22px;
}

/* 电影描述样式 */
.desc {
    color: #797d82;
    font-size: 13px;
}

/* 电影评分 */
.grade {
    color: #ffb232;
    font-size: 14px;
}

/* 购票按钮 */
.buyTicket {
    float: right;
    position: relative;
    top: -35px;
}

/* 去除缩略图的圆角 */
.van-card__thumb img {
    border-radius: 0px;
}

/* 重新设置缩略图的宽度 */
.van-card__thumb {
    width: 70px;
}

/* 让底部上去50px */
.main {
    margin-bottom: 50px;
}
</style>
